<template>
	<view class="page" :style="{ '--fss': app.theme.fss() }">
		<common-header :title="scrollTop > 30 ? '若非无梦💪' : ''" :background="`rgba(33,33,33,${scrollTop / 100})`">
			<template #right>
				<view class="rightText iconfont icon-chakantiezigengduo" @tap="morePerson"></view>
			</template>
		</common-header>
		<view class="filterBackground flex">
			<image src="https://file.shengmaapp.com/storage/aichat/20240526/1464eec9702c9f539410c844aa5503ed.jpg" mode="aspectFill" class="image"></image>
			<view class="black"></view>
		</view>
		<view class="pageMain">
			<status-bar></status-bar>
			<view class="userInfo">
				<view class="avatarView flex">
					<image src="https://file.shengmaapp.com/storage/aichat/20240526/1464eec9702c9f539410c844aa5503ed.jpg" mode="aspectFill" class="image"></image>
					<view class="right flex">
						<view class="item flex">
							<text class="num ell">15</text>
							<text class="text ell">音乐生成</text>
						</view>
						<view class="item flex">
							<text class="num ell">36</text>
							<text class="text ell">入驻(天)</text>
						</view>
						<view class="item flex">
							<text class="num ell" v-if="!true">无</text>
							<image src="/static/img/bnx.webp" mode="heightFix" class="bnx" v-else></image>
							<text class="text ell">会员</text>
						</view>
					</view>
				</view>
				<view class="accountView">
					<view class="nickname ell">若非无梦💪</view>
					<view class="desc Line2">这家伙懒得一批，啥简介都没写！</view>
					<view class="tar flex">
						<view class="item">账户ID: 100021</view>
						<view class="item">发表过音乐</view>
					</view>
				</view>
			</view>
			<view class="recordView">
				<view class="tabFlex flex">
					<view class="item" :class="recordTab.index === index ? 'activeItem' : ''" @tap="recordTab.index = index" v-for="(item, index) in recordTab.list">{{ item.name }}</view>
					<view class="active flex" :style="{ left: `calc((160rpx) * ${recordTab.index})`, width: `160rpx` }">
						<view></view>
					</view>
				</view>
				<template v-if="recordTab.index === 0">
					<view class="recordGroup flex">
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240401/c45045ad649c15f6e98bef1fdf4a0def.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">生日快乐</view>
								<view class="desc ell">1950s jazz scat</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240522/d9c9baed501a80e5e5ad39f8e8b97b51.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">SPAGHETTI</view>
								<view class="desc ell">Italian</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240401/868c9b2103421668b2d7c89f12add164.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">Wake（Like）</view>
								<view class="desc ell">Young & Free - Wake</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240523/7920cd1a2b1fc6dcd1fc0432c1a04f8e.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">想你，希望你一切都好</view>
								<view class="desc ell">U27479125</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240523/fa02c35d76e4c65780fc75b45e3d0efe.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">我是一个粉刷匠</view>
								<view class="desc ell">AI音乐研究生</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240401/868c9b2103421668b2d7c89f12add164.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">Wake（Like）</view>
								<view class="desc ell">Young & Free - Wake</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240401/c45045ad649c15f6e98bef1fdf4a0def.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">生日快乐</view>
								<view class="desc ell">1950s jazz scat</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240522/d9c9baed501a80e5e5ad39f8e8b97b51.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">SPAGHETTI</view>
								<view class="desc ell">Italian</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240401/868c9b2103421668b2d7c89f12add164.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">Wake（Like）</view>
								<view class="desc ell">Young & Free - Wake</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240523/7920cd1a2b1fc6dcd1fc0432c1a04f8e.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">想你，希望你一切都好</view>
								<view class="desc ell">U27479125</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240523/fa02c35d76e4c65780fc75b45e3d0efe.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">我是一个粉刷匠</view>
								<view class="desc ell">AI音乐研究生</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
						<view class="item flex" @tap="app.util.openUrl({ url: '/pages/create/play' })">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240401/868c9b2103421668b2d7c89f12add164.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">Wake（Like）</view>
								<view class="desc ell">Young & Free - Wake</view>
							</view>
							<view class="btnFlex flex">
								<view class="btnItem iconfont icon-right-1-copy"></view>
							</view>
						</view>
					</view>
					<load-footer-text :load="1"></load-footer-text>
				</template>
				<no-data text="该用户设置了私密" v-else></no-data>
			</view>
		</view>
	</view>
	<common-bottom-popup ref="commonBottomPopupRef" />
</template>

<script setup>
	import { ref, onMounted, inject } from "vue";
	import {  onLoad, onPageScroll } from "@dcloudio/uni-app";
	const app = inject('app');
	
	/* 变量区域 */
	// 底部通用弹出层
	const commonBottomPopupRef = ref();
	
	// 滚动位置
	const scrollTop = ref(0);
	
	// 记录选项卡
	const recordTab = ref({
		index: 0,
		list: [
			{ name: "TA创作的" },
			{ name: "喜欢" },
		]
	});
	
	/* 方法区域 */
	function morePerson(){
		commonBottomPopupRef.value.open({
			blockList: [
				[
					{ name: '举报TA', icon: '/static/img/report_icon.png', key: 'report' },
					{ name: '不想看TA', color: '#ff4f23', icon: '/static/img/look_icon.png', key: 'report' },
				]
			],
			itemTap(res){
				console.log(res);
			}
		});
	}
	
	// 页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
</script>

<style lang="scss" scoped>
	.page{
		position: relative;
		.rightText{
			color: #FFF;
			font-size: calc(40rpx * var(--fss));
			padding-left: 4rpx;
		}
		.filterBackground{
			flex-direction: column;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			.image{
				width: 100%;
				height: 400rpx;
				filter: blur(130rpx);
			}
			.black{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0));
			}
		}
		.pageMain{
			position: relative;
			z-index: 2;
			padding-top: 60rpx;
			.userInfo{
				background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(0,0,0,0));
				border-radius: 30rpx 30rpx 0 0;
				border-top: 2rpx solid rgba(255,255,255,0.2);
				.avatarView{
					flex-direction: row;
					align-items: center;
					padding: 0 0 0 36rpx;
					.image{
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						border: 4rpx solid rgba(255,255,255,0.55);
						margin-top: -90rpx;
					}
					.right{
						flex-direction: row;
						align-items: center;
						flex: 1;
						width: 0;
						padding: 0 20rpx;
						.item{
							flex: 1;
							width: 0;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							padding: 26rpx 8rpx;
							.num{
								font-size: calc(30rpx * var(--fss));
								color: rgba(255,255,255,1);
								line-height: 40rpx;
								font-weight: bold;
							}
							.bnx{
								height: 30rpx;
								margin: 5rpx 0;
							}
							.text{
								font-size: calc(22rpx * var(--fss));
								color: rgba(255,255,255,0.55);
								line-height: 1.2;
								margin-top: 10rpx;
							}
						}
					}
				}
				.accountView{
					padding: 0 36rpx;
					margin-top: 25rpx;
					.nickname{
						color: #FFF;
						font-size: calc(32rpx * var(--fss));
						font-weight: bold;
						line-height: 1.2;
					}
					.desc{
						color: rgba(255,255,255,0.6);
						font-size: calc(24rpx * var(--fss));
						line-height: 1.35;
						margin-top: 20rpx;
						text{
							font-size: calc(20rpx * var(--fss));
						}
					}
					.tar{
						flex-direction: row;
						flex-wrap: wrap;
						margin-top: 26rpx;
						margin-bottom: -20rpx;
						.item{
							padding: 0 18rpx;
							color: rgba(255,255,255,0.75);
							background: rgba(255,255,255,0.06);
							margin-right: 13rpx;
							line-height: 1.8;
							border-radius: 6rpx;
							font-size: calc(20rpx * var(--fss));
							margin-bottom: 20rpx;
						}
					}
				}
			}
			.recordView{
				margin: 20rpx 0 0 0;
				.tabFlex{
					align-items: center;
					flex-direction: row;
					margin: 0 35rpx;
					border-bottom: 2rpx solid rgba(255,255,255,0.032);
					position: relative;
					.item{
						text-align: center;
						width: 160rpx;
						font-size: calc(26rpx * var(--fss));
						color: rgba(255,255,255,0.65);
						transition: 0.2s all;
						line-height: 80rpx;
						&:active{
							opacity: 0.8;
						}
						&.activeItem{
							color: rgba(255,255,255,0.9);
							font-weight: bold;
							font-size: calc(28rpx * var(--fss));
						}
					}
					.active{
						position: absolute;
						bottom: 0;
						height: 2rpx;
						transition: 0.2s all;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						view{
							border-radius: 10rpx;
							background: rgba(255,255,255,1);
							width: 20%;
							height: 100%;
						}
					}
				}
				.recordGroup{
					flex-direction: column;
					margin-top: 35rpx;
					.item{
						padding: 0 18rpx 0 32rpx;
						margin-bottom: 37rpx;
						flex-direction: row;
						align-items: center;
						transition: 0.2s all;
						&:active{
							opacity: 0.8;
						}
						&:nth-last-child(1){
							margin-bottom: 0;
						}
						.imageView{
							width: 86rpx;
							height: 86rpx;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							background: rgba(255,255,255,0.06);
							border-radius: 12rpx;
							.image{
								width: 100%;
								height: 100%;
								border-radius: 12rpx;
								display: block;
							}
							.loading{
								transform: scale(0.5);
							}
						}
						.info{
							margin: 0 25rpx;
							flex: 1;
							width: 0;
							.h3{
								font-size: calc(26rpx * var(--fss));
								line-height: 1.2;
								color: rgba(255,255,255,0.9);
							}
							.desc{
								font-size: calc(22rpx * var(--fss));
								line-height: 1.2;
								color: rgba(255,255,255,0.6);
								margin-top: 8rpx;
							}
						}
						.btnFlex{
							flex-direction: row;
							align-items: center;
							.btnItem{
								font-size: calc(26rpx * var(--fss));
								color: rgba(255,255,255,0.35);
								margin-left: 20rpx;
								width: 44rpx;
								line-height: 60rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
</style>